<template>
  <div class="main-layout">
    <TopNavbar />
    <Sidebar />
    <div class="content-wrapper">
      <router-view />
    </div>
  </div>
</template>

<script>
import Sidebar from '../components/Sidebar.vue';
import TopNavbar from '../components/TopNavbar.vue';

export default {
  name: 'MainLayout',
  components: {
    Sidebar,
    TopNavbar
  }
}
</script>

<style scoped>
.main-layout {
  position: fixed;
  top: -18px;
  right: 0;
  left:170px;
  bottom: 0;

  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
  z-index: 900;
  transition: all 0.3s ease;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.content-wrapper {
  flex: 1;
  min-height: calc(105vh - 26px);
  padding-top: 68px; /* 为顶部导航栏留出空间 */
  padding-left: 50px; /* 为侧边栏留出空间，但允许内容延伸到页面最右 */

  transition: padding-left 0.3s ease;
}

/* 响应式设计 */
@media (max-width: 768px) {
  .content-wrapper {
    padding-left: 0;
  }
}
</style>
